<template>
  <div id="appRoot">
    <template v-if="!$route.meta.public">
      <v-app class="app">
        <!-- header -->
        <app-header id="page-header"></app-header>
        <!-- content -->
        <v-content>
          <app-content></app-content>
        </v-content>
        <!-- footer -->
        <app-footer></app-footer>
        <!-- returnTopButton -->
        <app-fab></app-fab>
      </v-app>
    </template>
    <template v-else>
      <transition>
        <keep-alive>
          <router-view :key="$route.fullpath"></router-view>
        </keep-alive>
      </transition>
    </template>
  </div>
</template>
<script>
import AppHeader from './public/AppHeader'
import AppFooter from './public/AppFooter'
import AppContent from './public/AppContent'
import AppFab from '@/components/AppFab'
export default {
  name: 'app-main',
  data: () => ({}),
  components: { AppHeader, AppFooter, AppContent, AppFab },
  methods: {}
}
</script>
<style src="@/styles/app.css">
</style>
